<div class="page-title">
  <div class="row">
    <div class="col-xs-12"><h1>Playbooks</h1></div>
  </div>
</div>

<loader *ngIf="!playbooks"></loader>

<div *ngIf="playbooks && !playbooks.length" class="no-playbooks">
  You don't have any playbooks.
</div>

<pager [pagingData]="pagedData" (onChange)="fetchData($event)"></pager>

<div class="playbooks row" *ngIf="playbooks && playbooks.length">
  <div class="col-xs-12">

    <div class="table-help">
      <div class="col-xs-3">Name</div>
      <div class="col-xs-7">Description</div>
      <div class="col-xs-2 text-right">Servers Involved</div>
    </div>

    <div class="box" *ngFor="let playbook of playbooks">
      <div class="col-xs-3 name">
        <span *ngIf="!isPlaybookPermitted(playbook)" class="glyphicon glyphicon-lock">
        </span>
        {{playbook.name}}
      </div>
      <div class="col-xs-7 parameter">{{playbook.description}}</div>
      <div class="col-xs-2 icon servers">
        <span *ngIf="playbook.required_server_list" class="glyphicon glyphicon-ok">
        </span>
      </div>
  </div>
</div>

<pager [pagingData]="pagedData" (onChange)="fetchData($event)"></pager>
